doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        meta(name="description", content= "tsParticles")
        meta(name="author", content= "Matteo Bruni")
        meta(name="apple-mobile-web-app-capable" content="yes")
        meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")

        meta(name="twitter:card" content="summary_large_image")
        meta(name="twitter:creator" content="@HollowMatt_ITA")
        meta(name="twitter:image:src" content="https://particles.js.org/images/demo2.png")
        meta(property="og:title" content="tsParticles - A lightweight TypeScript library for creating particles")
        meta(property="og:site_name" content="tsParticles")
        meta(property="og:url" content="https://particles.js.org/")
        meta(property="og:description" content="A lightweight TypeScript library for creating particles.")
        meta(property="og:image" content="https://particles.js.org/images/demo2.png")

        title tsParticles
        link(href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css")
        link(href="/fontawesome/css/all.css" rel="stylesheet" type="text/css")
        link(href="/jsoneditor/jsoneditor.css" rel="stylesheet" type="text/css")

        style.
            /* ---- reset ---- */
            body {
                margin: 0;
                font: normal 75% Arial, Helvetica, sans-serif;
            }

            canvas {
                display: block;
                vertical-align: bottom;
            }
    body
        script(src="/jquery/jquery.slim.min.js")
        script(src="/popper.js/umd/popper.min.js")
        script(src="/bootstrap/js/bootstrap.min.js")
        script(src="/tsparticles/tsparticles.bundle.min.js")
        script.
            particlesJS("tsparticles", {
                "background": {
                    "color": {
                        "value": "#0d47a1"
                    }
                },
                "fpsLimit": 60,
                "interactivity": {
                    "events": {
                        "onClick": {
                            "enable": true,
                            "mode": "push"
                        },
                        "onHover": {
                            "enable": true,
                            "mode": "repulse"
                        },
                        "resize": true
                    },
                    "modes": {
                        "bubble": {
                            "distance": 400,
                            "duration": 2,
                            "opacity": 0.8,
                            "size": 40
                        },
                        "push": {
                            "quantity": 4
                        },
                        "repulse": {
                            "distance": 200,
                            "duration": 0.4
                        }
                    }
                },
                "particles": {
                    "color": {
                        "value": "#ffffff"
                    },
                    "links": {
                        "color": "#ffffff",
                        "distance": 150,
                        "enable": true,
                        "opacity": 0.5,
                        "width": 1
                    },
                    "collisions": {
                        "enable": true
                    },
                    "move": {
                        "direction": "none",
                        "enable": true,
                        "outMode": "bounce",
                        "random": false,
                        "speed": 6,
                        "straight": false
                    },
                    "number": {
                        "density": {
                            "enable": true,
                            "area": 800
                        },
                        "value": 80
                    },
                    "opacity": {
                        "value": 0.5
                    },
                    "shape": {
                        "type": "circle"
                    },
                    "size": {
                        "random": true,
                        "value": 5
                    }
                },
                "detectRetina": true
            });
